<template>
	<view>
		<view class="head-bg padding-lr">
			<view class="user-info flex align-center justify-between">
				<view class="flex align-center">
					<image class="avatar-img round head-img" :src="baseUrl+userInfo.avatar"></image>
					<view class="mobile">
						<view class="mobile_title">{{greeting}}，{{userInfo.realname}} ~</view>
						<view>{{descText}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="">
			<uni-section title="管理菜单" sub-title="权限管理" type="line">
				<uni-grid :column="4" :showBorder="false">
					<uni-grid-item>
						<view class="grid-item" @click="goPage('/pages/admin/users/users')">
							<view class="grid-item-img">
								<image src="/static/admin/usermanage.png" mode=""></image>
							</view>
							<view class="grid-item-text">
								用户管理
							</view>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="grid-item" @click="goPage('/pages/admin/smsType/smsType')">
							<view class="grid-item-img">
								<image src="/static/admin/sms.png" mode=""></image>
							</view>
							<view class="grid-item-text">
								SMS类型管理
							</view>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="grid-item" @click="goPage('/pages/admin/smsHirstory/smsHirstory')">
							<view class="grid-item-img">
								<image src="/static/admin/hirstory.png" mode=""></image>
							</view>
							<view class="grid-item-text">
								短信历史
							</view>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="grid-item" @click="goPage('/pages/admin/roles/roles')">
							<view class="grid-item-img">
								<image src="/static/admin/admin.png" mode=""></image>
							</view>
							<view class="grid-item-text">
								权限管理
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</uni-section>
		</view>

		<view class="card-view">
			<uni-section title="今日接码数量" sub-title="今日每人接码占比,仅展示Top5" type="line">
				<qiun-data-charts type="rose" :opts="opts" :chartData="chartData" v-if="chartData"/>
				<view class="nodata-view" v-else>
					<image src="/static/admin/nodata.png" mode=""></image>
					<view class="nodata-view-text">
						今日还未接码
					</view>
				</view>
			</uni-section>
		</view>
		<view class="card-view">
			<uni-section title="7日内接码次数" sub-title="7日内每天接码总和" type="line">
				<qiun-data-charts type="column" :opts="opts2" :chartData="chartData2" v-if="chartData2"/>
				<view class="nodata-view" v-else>
					<image src="/static/admin/nodata.png" mode=""></image>
					<view class="nodata-view-text">
						数据量未达到统计标准
					</view>
				</view>
			</uni-section>
		</view>
	</view>
</template>

<script>
	import api from '@/common/apiUtil.js'
	export default {
		data() {
			return {
				baseUrl: api.SERVER_BASE,
				userInfo: uni.getStorageSync("userInfo"),
				greeting: null,
				descText: null,
				chartData: null,
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				chartData2: null,
				opts2: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						area: {
							type: "straight",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: false,
							activeType: "hollow"
						}
					}
				}
			}
		},
		onShow() {
			this.setGreeting();
			setTimeout(()=>{
				// 今日接码数量
				this.getCountSourceData();
				// 近七日接码次数
				this.getCodeLastSevenDays();
			},500)
		},
		methods: {
			setGreeting() {
				const now = new Date();
				const hours = now.getHours();

				const phrases = {
					morning: [
						"早上好，祝您今天事事顺利！",
						"新的一天，新的开始，加油！",
						"愿你今天充满阳光与笑容~",
						"早上好，愿你今天充满活力！",
						"新的一天，新的希望，祝你好运！",
						"美好的一天从早晨开始，早上好！"
					],
					afternoon: [
						"下午好，希望你有个愉快的下午~",
						"工作辛苦了，记得多喝水，保重身体~",
						"天气不错，出去走走吧，呼吸新鲜空气~",
						"午后时光，愿你轻松愉快~",
						"下午好，继续努力，完成今天的目标！",
						"充实的下午，愿你高效且开心~"
					],
					evening: [
						"夜深了，大脑和身体也需要休息，早点睡吧~",
						"夜晚是沉静的，愿你拥有一个美好的梦境~",
						"生活总有起伏，不要气馁，保持积极心态~",
						"夜晚时光，放松身心，明天继续奋斗~",
						"睡前放松一下，明天会更好！",
						"晚安，愿你做个好梦~"
					]
				};
				const nowTime = new Date();
				const hour = nowTime.getHours();
				let greeting = "";
				let descText = "";

				let period;
				if (hour >= 5 && hour < 12) {
					greeting = '上午好';
					period = 'morning';
				} else if (hour >= 12 && hour < 18) {
					greeting = '下午好';
					period = 'afternoon';
				} else {
					greeting = '晚上好';
					period = 'evening';
				}

				const randomIndex = Math.floor(Math.random() * phrases[period].length);
				this.descText = phrases[period][randomIndex]
				this.greeting = greeting;
			},
			getCountSourceData(){
				this.$get(api.CODE_SOURCE_BY_TO_DAY).then(res=>{
					console.log(res,"getCountSourceData")
					
					this.chartData = {
						series: [{
							data: res.result
						}]
					}
				})
			},
			getCodeLastSevenDays(){
				this.$get(api.CODE_LAST_SEVEN_DAYS).then(res=>{
					console.log(res)
					
					let data = {
						categories: res.result.date,
						series: [{
								name: "每日接码总量",
								data: res.result.data
							}
						]
					}
					this.chartData2 = data
					
				})
			},
			goPage(linkUrl){
				console.log(linkUrl)
				uni.navigateTo({
					url:linkUrl
				})
			}
		}
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	@import url("@/static/style/color-ui.css");
	
	page{
		padding-bottom: 100rpx;
	}

	.head-bg {
		padding: 25rpx;
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100%;

		.user-info {
			margin: 20rpx 0;

			.head-img {
				width: 120rpx;
				height: 120rpx;
			}

			.mobile {
				padding-left: 23rpx;
				color: #222222;

				.mobile_title {
					font-weight: bold;
					font-size: 36rpx;
					margin-bottom: 10rpx;
				}
			}

			.info-edit {
				font-size: 24rpx;
				font-weight: 500;
				color: #848b9e;
				line-height: 18rpx;
				padding-right: 12rpx;
			}
		}
	}

	.card-view {
		padding: 0 20rpx;
	}
	
	.grid-item{
		text-align: center;
		margin-top: 20rpx;
		.grid-item-img{
			margin: 10rpx 0;
			image{
				width: 80rpx;
				height: 80rpx;
			}
		}
		.grid-item-text{
			
		}
	}
	.nodata-view{
		text-align: center;
		image{
			width: 200rpx;
			height: 200rpx;
		}
		.nodata-view-text{
			color: #7f7a80;
			font-weight: bold;
			margin-top: -20rpx;
		}
	}
</style>